<template>
  <div class="storyTitle">故事标题</div> 
  <div class="underlineStyle"></div>
  <br>
  <div class="paraBox">
    <div class="paraTitle">第一段的标题</div>
    <div class="paraMain">
      <!-- 第一段的插画 -->
      <div class="paraPic" id="app">
        <el-carousel indicator-position="outside" class="picsStyle" height="200px">
          <el-carousel-item v-for="(item,index) in specImages" :key="index">
            <el-image :src="item" class="picStyle" :fit="fill"/>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="left_right_line"></div>
      <div class="paraContent">
        第一段的内容第一段的内容第一段的内容第一段的内容第一段的内容第一段的内容第一段的内容第一段的内容第一段的内容
        第一段的内容第一段的内容第一段的内容第一段的内容第一段的内容第一段的内容第一段的内容第一段的内容第一段的内容
        第一段的内容第一段的内容第一段的内容第一段的内容第一段的内容第一段的内容第一段的内容第一段的内容第一段的内容
      </div>
    </div>
    
  </div>
</template>

<script>
export default{
  data() {
    return {
      value: true,
      specImages: [
        "https://tse2-mm.cn.bing.net/th/id/OIP-C.9SvGW4Uvqax4tyl0FPefxAHaFj?pid=ImgDet&rs=1", 
        "https://img.zcool.cn/community/01dcef5cab635fa801214168ecfbe4.jpg@2o.jpg", 
        "https://img.zcool.cn/community/01830f5795bfe00000018c1b010822.jpg@1280w_1l_2o_100sh.jpg", 
        "https://img.zcool.cn/community/01ccda5a273448a80120ba381db5d4.jpg@1280w_1l_2o_100sh.jpg", 
        "https://ts1.cn.mm.bing.net/th/id/R-C.6735ff58792fb23dbab06eb49af5c4c1?rik=CAiDYBVDIc3MTQ&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f40033%2f7650.jpg_wh1200.jpg&ehk=tA7hfhprtYyYILi7rwLjWwhO%2f7O%2bzT0tlCXi%2bd4QAEo%3d&risl=&pid=ImgRaw&r=0"
      ],

     
      
    }
  },
  methods: {
    
  },
  mounted() {
   
  }
}
  

</script>

<style>
    .paraBox{
      border-top: 20px solid rgb(255, 213, 21);
      border-bottom: 10px solid rgb(255, 213, 21);
      margin-bottom: 10px;
      position: relative;
      border-radius: 5px;
      box-shadow: 3px 3px 3px rgba(160, 159, 159, 0.5);
      height: 300px;
      margin-left: 10%;
      margin-right: 10%; 
    }
    .paraTitle{
      font-size: 30px;
      color: black;
      font-family: '微软雅黑';
      text-align: center;
      line-height: 50px;
    }
    .underlineStyle{
      border: 1px solid rgb(83, 83, 83);
    }
    .paraMain{
      display: flex;
    }
    .picsStyle{
      box-shadow: 3px 3px 3px rgba(160, 159, 159, 0.5);
      margin-left: 20px;
      width: 300px;
      border: 3px solid rgb(253, 226, 107);
      border-radius: 5px;
    }
    .picStyle{
      border-radius: 5px;
      float: left;
    }
    .left_right_line{
      border-left: 2px solid rgb(103, 103, 103);
      margin-left: 20px;
      margin-right:20px;
    }
    
    .paraContent{
      text-indent: 20px;
      font-size: 18px;
      line-height: 30px;
      text-decoration: underline dashed black;
      color: rgb(91, 91, 91);
    }
    .storyTitle{
      text-align: center;
      font-size: 40px;
      font-family: '黑体';
      line-height: 60px;
    }
  </style>